<template>
  <div class="strut-div">
    <!-- <div class="item-top-city">

      <span style="float: right;">
        <el-radio-group v-model="cityType" size="mini">
          <el-radio-button label="全市"></el-radio-button>
          <el-radio-button label="洪洞"></el-radio-button>
        </el-radio-group>
      </span>
    </div> -->
    <div style="height: 384px;">
      <common-bar-chart ref="touristStayBar" :config="config"></common-bar-chart>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  export default {
    components: {
      CommonBarChart
    },
    data() {
      return {
        cityType: '洪洞',
        nowDate: '',
        config: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'touristStayBar',
            yName: "(%)",
            xAxis: ['一天', '两天', '三天', '四天', '五天及以上'],
            y: [{
              axis: {
                min: 0,
                max: 50,
                name: '(%)'
              },
              title: '',
              data: [43.68, 27.5, 16.46, 8.23, 4.13],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#6C43F7' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#B49EFF' // 100% 处的颜色
                }],
              },
              stack: '1'
            }]
          }
        }
      };
    },
    mounted() {
      this.nowDate = new Date().format('yyyy年mm月dd日');
      
      this.getStayTime();
    },
    methods: {
      getStayTime() {
        this.$jqPost(this.$api.getStayTimeDetail, {
          sObjType: "03",
          sFJNM: "00010001001400090001",
          sYearMonth: new Date().format('yyyy-mm'),
          sAreaName: "全部",
          iPageNum: 1,
          iPageSize: 8
        }).then(res => {
          if(res.retCode == 200 && res.retData) {
            let data = res.retData.listData[0];
            
            this.config.option.y[0].data = [data.sPercenA, data.sPercenB, data.sPercenC, data.sPercenD, data.sPercenE];  
          }
          this.$refs.touristStayBar.initChart();
        })
      }
    }
  };
</script>

<style>
  .item-top-city {
    padding: 10px 20px;
    height: 32px;
    ;
  }

  .item-top-city .time {
    font-size: 22px;
    color: #c1d0ff;
  }

  .item-top-city .el-radio-button--mini .el-radio-button__inner {
    font-size: 18px;
  }

  .item-top-city .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
    border-color: rgba(144, 110, 252, 1);
    background: linear-gradient(90deg, rgba(108, 67, 247, 1), rgba(180, 158, 255, 1));
  }

  .item-top-city .el-radio-button__inner:hover {
    color: rgba(144, 110, 252, 1);
  }

  .item-top-city .el-radio-button__inner {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(144, 110, 252, 1);
    padding: 5px 12px;
    color: #fff;
  }

  .item-top-city .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 8px 0 0 8px;
  }

  .item-top-city .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 8px 8px 0;
  }
</style>
